<template>
	<div class="components-table">
		<!-- table主体 -->
		<el-table
			:data="data"
			:height="height"
			style="width: 100%"
			:border="true"
			table-layout="fixed"
			@selection-change="handleSelectionChange">
			<template #empty>
				<img
					src="@/assets/img/noData.svg"
					alt="暂无数据1" />
			</template>
			<!-- <el-table-column
				type="selection"
				width="55" /> -->
			<el-table-column
				type="index"
				width="50"
				align="center" />
			<el-table-column
				v-for="column in columns"
				:key="column.prop"
				:prop="column.prop"
				:label="column.label"
				:width="column.width"
				:align="column.align"
				:fixed="column.fixed"
				:show-overflow-tooltip="column.showOverflowTooltip">
				<template v-slot="scope">
					<component
						:is="column.render"
						v-bind="scope"
						v-if="column.render">
					</component>
					<span v-else>{{ scope.row[column.prop] }}</span>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div v-if="paginationConfig.paginationShow" class="pagination-wrapper">
			<el-pagination
				background
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[10, 20, 50]"
				:total="paginationConfig.total"
				v-model:page-size="paginationData.pageSize"
				v-model:currentPage="paginationData.currentPage"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange" />
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'

	interface TableColumn {
		prop: string
		label: string
		width?: string | number
		align?: string
		fixed?: string | boolean
		render?: (scope: any) => any
		showOverflowTooltip?: boolean
	}

	const props = defineProps<{
		data: any[]
		columns: TableColumn[]
		height?: string | number
		paginationConfig: any
	}>()

	const emit = defineEmits<{
		(event: 'selection-change', selection: any[]): void
		(e: 'page-change', currentPage: number): void
		(e: 'size-change', pageSize: number): void
	}>()

	const handleSelectionChange = (selection: any[]) => {
		emit('selection-change', selection)
	}

	const paginationData = reactive({
		currentPage: props.paginationConfig.currentPage,
		pageSize: props.paginationConfig.pageSize,
	})

	const handleCurrentChange = (currentPage: number) => {
		paginationData.currentPage = currentPage
		emit('page-change', currentPage)
	}

	const handleSizeChange = (pageSize: number) => {
		paginationData.pageSize = pageSize
		emit('size-change', pageSize)
	}
</script>
<style lang="scss" scoped>
	.components-table {
		.pagination-wrapper {
			margin-top: 10px;
		}
	}
</style>
